<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表加折线</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <th style="width:20%">省份</th>
            <th style="width:80%">监听情况</th>
        </thead>
        <tbody id="data">

        </tbody>
    </table>
</body>
<script type="text/javascript">
    /**
     *初始化
     */
    $(function () {
        //加载json数据
        $.getJSON('./json/列表加折线.json', function (data) {
            //先初始化表格
            var mHtml = '';
            $.each(data, function (i, json) {
                mHtml += "<tr><td>" + json.province + "</td><td><div id='" + json.id + "' style='width: 100%;height: 100%;'></div></td></tr>";
            });
            $('#data').append(mHtml);

            //初始化折线图
            $.each(data, function (i, json) {
                var myChart = echarts.init(document.getElementById(json.id));
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: [
                            '1:00',
                            '2:00',
                            '3:00',
                            '4:00',
                            '5:00',
                            '6:00',
                            '7:00',
                            '8:00',
                            '9:00',
                            '10:00',
                            '11:00',
                            '12:00'
                        ]
                    },
                    yAxis: {
                        min:0,  //取0为最小刻度
                        max: 1, //取100为最大刻度
                        minInterval: 1, //分割刻度
                        axisLabel: {
                            show: true,
                            textStyle: {
                            },
                            // 这里重新定义就可以
                            formatter: function (value) {
                                var texts = [];
                                if (value === 0) {
                                    texts.push('异常');
                                } else if (value === 1) {
                                    texts.push('正常');
                                }
                                return texts;
                            }
                        },
                    },
                    series: [
                        {
                            data: json.list,
                            type: 'line'
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            });

        });
    });
</script>
</html>